<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '商品详情',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <!-- page-meta 只能是页面内的第一个节点 -->
  <page-meta :page-style="`overflow:${popupShow ? 'hidden' : 'visible'};`"></page-meta>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full pos-relative">
      <view class="flex justify-start items-center header-back" @click="pageBack">
        <view class="flex justify-center items-center back-icon">
          <wd-icon name="chevron-left" size="22px"></wd-icon>
        </view>
      </view>
      <view class="w-full h-full home-content">
        <view class="w-full hr-750 flex justify-center items-center">
          <image width="100%" height="100%" :src="productInfo?.pic" @click="lookProductPic" />
        </view>
        <!-- 显示秒杀 -->
        <view class="w-full hr-100 flex justify-end pos-relative" v-if="isSecondActivity">
          <view class="w-full h-full pos-absolute pos-top-0 pos-left-0 z-1">
            <image width="100%" height="100%" :src="activityIcon" mode="scaleToFill" />
          </view>
          <view class="flex justify-center items-center flex-col second-right pos-relative z-2">
            <view class="time-text">距离结束仅剩</view>
            <view>
              <wd-count-down :time="flashSaleTime">
                <template #default="{ current }">
                  <span class="custom-count-down">
                    {{
                      current.hours + current.days * 24 < 10
                        ? '0' + (current.hours + current.days * 24)
                        : current.hours + current.days * 24
                    }}
                  </span>
                  <span class="custom-count-down-colon">:</span>
                  <span class="custom-count-down">{{ current.minutes }}</span>
                  <span class="custom-count-down-colon">:</span>
                  <span class="custom-count-down">{{ current.seconds }}</span>
                </template>
              </wd-count-down>
            </view>
          </view>
        </view>
        <!-- 秒杀价格 -->
        <view class="price-box">
          <view class="flex justify-between items-center">
            <view class="flex justify-start items-center">
              <view class="price-title" v-if="isSecondActivity">秒杀价</view>
              <view class="flex justify-start items-end">
                <text class="line-height-none price-symbol">¥</text>
                <text class="line-height-none price-num">{{ productInfo?.price }}</text>
              </view>
              <view class="flex justify-start items-end price-old" v-if="isSecondActivity">
                <text>¥</text>
                <text>{{ productInfo?.origin_price }}</text>
              </view>
            </view>
            <view class="flex justify-start items-center">
              <view
                class="wr-42 hr-42 price-icon flex justify-center items-center"
                @click="shareClick"
              >
                <image
                  width="100%"
                  height="100%"
                  :src="
                    productInfo?.is_collect === 0 ? shareIcons.uncheckIcon : shareIcons.checkIcon
                  "
                />
              </view>
              <view
                class="wr-42 hr-42 price-icon flex justify-center items-center"
                @click="sharedProduct"
              >
                <image width="100%" height="100%" src="../../static/images/icons/fun-5.png" />
              </view>
            </view>
          </view>
          <view class="product-title">
            <text>{{ productInfo?.name }}</text>
          </view>
          <view class="share-box">
            <text>分享最多可得{{ productInfo?.share_bonus }}天琴币</text>
          </view>
        </view>
        <!-- 商品详情 -->
        <view class="ensure-list">
          <view
            class="flex justify-start items-center mg-r-48"
            v-for="(item, index) in ensureList"
            :key="index"
          >
            <view class="ensure-icon">
              <wd-icon name="check-circle"></wd-icon>
            </view>
            <view class="ensure-text">{{ item.text }}</view>
          </view>
        </view>
        <!-- <view class="w-full hr-28"></view> -->
        <!-- 商品规格 -->
        <view class="flex justify-between items-center specs-box">
          <view class="flex justify-start items-center">
            <view class="specs-title">规格</view>
            <view class="specs-desc"></view>
          </view>
          <view
            class="flex justify-start items-center font-size-24 font-400 text-gray-999"
            @click="popupOpen"
          >
            <view>共{{ scalesList.length }}个规格可选</view>
            <wd-icon name="chevron-right" class="font-size-36"></wd-icon>
          </view>
        </view>
        <!-- 商品评价 -->
        <view class="w-full p-x-28 p-y-32 bg-white mg-t-20">
          <view class="flex justify-between items-center">
            <view class="font-size-32 font-500 text-gray-333">商品评价</view>
            <view class="flex justify-start items-center text-gray-999 font-size-24 font-400">
              <view>查看全部</view>
              <wd-icon name="chevron-right" class="font-size-36"></wd-icon>
            </view>
          </view>
          <view
            class="flex justify-start mg-t-32"
            v-for="(item, index) in evaluateList"
            :key="index"
          >
            <view class="mg-r-16">
              <view class="wr-60 hr-60 rd-30 overflow-hidden">
                <image :width="'100%'" :height="'100%'" :src="item.avatar" />
              </view>
            </view>
            <view class="w-full">
              <view class="flex justify-between items-center font-400">
                <view class="font-size-28 text-gray-333">{{ item.nickname }}</view>
                <view class="font-size-24 text-gray-999">{{ item.create_time }}</view>
              </view>
              <view class="mg-t-8 font-size-24">
                <wd-rate size="24rpx" active-color="#7195F8" v-model="item.star" readonly />
              </view>
              <view class="mg-t-26 text-gray-333 font-size-24">
                {{ item.content }}
              </view>
              <view class="flex justify-start flex-wrap mg-t-24">
                <view
                  class="wr-200 hr-188 flex justify-start"
                  v-for="(img, index) in item.images"
                  :key="index"
                >
                  <view class="wr-188 hr-188 mg-r-16">
                    <image width="100%" height="100%" :src="img" />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 为你推荐 -->
        <view class="w-full p-x-28 p-y-32 bg-white mg-t-20">
          <view class="flex justify-between items-center mg-b-34">
            <view class="font-size-32 font-500 text-gray-333">为你推荐</view>
          </view>
          <view class="flex justify-between flex-wrap">
            <view
              class="wr-336 mg-b-20"
              v-for="(item, index) in productInfo.recommend"
              :key="index"
            >
              <view class="w-full hr-336">
                <image width="100%" height="100%" :src="item.pic" />
              </view>
              <view class="font-size-28 font-500 text-gray-333 text-truncate mg-t-24">
                {{ item.name }}
              </view>
              <view class="flex justify-between items-center mg-t-24">
                <view class="flex justify-start items-end text-red-1 font-500 line-height-none">
                  <view class="font-size-24 mg-b-4 mg-r-6">¥</view>
                  <view class="font-size-36">{{ item?.price }}</view>
                </view>
                <view class="text-gray-999 font-size-24 font-400">{{ item.storage }}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 宝贝详情 -->
        <view class="w-full bg-white mg-t-20">
          <view class="w-full hr-104 flex justify-center items-center">
            <view class="wr-121 hr-2 mg-r-16 border-image-left"></view>
            <view class="text-gray-666 font-size-28 font-500">宝贝详情</view>
            <view class="wr-121 hr-2 mg-l-16 border-image-right"></view>
          </view>
          <view class="w-full hr-856">
            <image width="100%" height="100%" :src="productInfo?.pic" />
          </view>
        </view>
      </view>
      <view
        class="w-full hr-156 bg-white flex justify-start pos-absolute pos-bottom-0 pos-left-0 z-1 box-border ps-t-16"
      >
        <view class="wr-94 hr-74 mg-l-10 flex justify-center items-center flex-col">
          <view class="wr-36 hr-36">
            <image width="100%" height="100%" :src="customerIcon" />
          </view>
          <view class="font-size-24 text-gray-333 font-100 mg-t-10">客服</view>
        </view>
        <view
          class="wr-94 hr-74 flex justify-center items-center flex-col"
          @click="goShopCar"
          v-if="!isSecondActivity"
        >
          <view class="wr-36 hr-36">
            <image width="100%" height="100%" :src="carIcon" />
          </view>
          <view class="font-size-24 text-gray-333 font-100 mg-t-10">购物车</view>
        </view>
        <view class="flex justify-start" v-if="!isSecondActivity">
          <view class="hr-88 mg-l-20">
            <wd-button custom-class="w-full h-full " type="info" @click="popupOpen">
              <text class="font-size-32 font-500">添加购物车</text>
            </wd-button>
          </view>
          <view class="hr-88 mg-l-20">
            <wd-button custom-class="w-full h-full" @click="popupOpen">
              <text class="font-size-32 font-500">立即购买</text>
            </wd-button>
          </view>
        </view>
        <view class="wr-600 hr-88 mg-l-20" v-if="isSecondActivity">
          <wd-button custom-class="w-full h-full" @click="popupOpen">
            <text class="font-size-32 font-500">立即抢购</text>
          </wd-button>
        </view>
      </view>
    </view>
    <wd-popup
      v-model="popupShow"
      lock-scroll
      position="bottom"
      :safe-area-inset-bottom="true"
      @close="closePopup"
    >
      <view class="w-full hr-948">
        <view class="w-full h-full p-x-28 p-y-32 border-box pos-relative">
          <view
            class="pos-absolute pos-top-28 pos-right-32 z-1 font-size-28 font-500 text-gray-999"
            @click="closePopup"
          >
            <wd-icon name="close"></wd-icon>
          </view>
          <view class="flex justify-start">
            <view class="wr-176 hr-176">
              <image width="100%" height="100%" :src="buyProduct?.skuItem?.pic" />
            </view>
            <view class="flex justify-end flex-col mg-l-28">
              <view class="flex justify-start items-end font-500 line-height-none text-red-1">
                <view class="font-size-24 mg-r-6 mg-b-6">¥</view>
                <view class="font-size-40 text-red-1">{{ buyProduct?.skuItem?.price }}</view>
              </view>
              <view>
                <view class="text-gray-999 font-size-24 font-400 mg-t-32">
                  库存 {{ buyProduct?.skuItem?.storage }}
                </view>
                <view class="text-gray-333 font-size-28 font-400 mg-t-24">
                  已选 {{ buyProduct?.skuValue }}
                </view>
              </view>
            </view>
          </view>
          <view v-for="(item, index) in scalesList" :key="index">
            <view>
              <view class="font-size-32 font-500 text-gray-333 mg-t-28">{{ item.name }}</view>
              <view class="flex justify-start flex-wrap mg-t-32">
                <view
                  v-for="(spec, index) in item?.list"
                  :key="index"
                  class="flex justify-center items-center p-x-32 p-y-16 b-rd-34 bg-#F3F4F8 text-gray-333 mg-b-20 mg-r-20"
                  :class="{ 'bg-blue-1 text-white': spec.id == buyProduct.skuId }"
                  @click="selectBuyProduct(spec)"
                >
                  <text class="font-size-28 font-500">{{ spec.title }}</text>
                </view>
              </view>
            </view>
            <view class="flex justify-between items-center mg-t-40">
              <view class="font-size-32 font-500 text-gray-333">数量</view>
              <view>
                <wd-input-number v-model="proCount" @change="handleChange" />
              </view>
            </view>
          </view>
          <view
            class="w-full pos-absolute pos-bottom-28 pos-left-0 z-1 box-border pb-safe flex justify-center items-center p-x-28"
          >
            <view
              class="w-full hr-80 flex justify-center items-center font-size-32 text-gray-333 font-500 bg-#DFDFFF br-left"
              @click="addToCart"
            >
              加入购物车
            </view>
            <view
              class="w-full hr-80 flex justify-center items-center font-size-32 text-white font-500 bg-#7195F8 br-right"
              @click="buyProNow"
            >
              立即购买
            </view>
          </view>
        </view>
      </view>
    </wd-popup>
    <wd-overlay :show="overlayShow">
      <view class="w-full h-full flex justify-center items-center">
        <view class="over-container">
          <view class="w-full overflow-hidden bg-#fff rd-8">
            <shared :propData="sharedInfo" @success="shareSuccess"></shared>
          </view>
          <view class="w-full flex justify-center mg-t-44">
            <view
              class="wr-290 hr-80 flex justify-center items-center font-size-32 text-white font-500 bg-#7195F8 rd-40"
              @click="saveImage"
            >
              保存图片
            </view>
          </view>
          <view class="w-full flex justify-center items-center mg-t-38">
            <view class="wr-64 hr-64" @click="closeShared">
              <image :width="'100%'" :height="'100%'" src="../../static/images/icons/close.png" />
            </view>
          </view>
        </view>
      </view>
    </wd-overlay>
  </view>
</template>

<script lang="ts" setup>
import {
  addShopCar,
  addVisitRecord,
  createQrCode,
  flushGoodDetail,
  getGoodComments,
  getGoodDetail,
  setCollectEdit,
} from '@/service/shop/shop'
import shared from '@/components/shared.vue'
import { useUserStore } from '@/store'
import { useSaveImage } from '@/hooks/useSaveImage'
defineOptions({
  name: 'ShoppingDetails',
  components: {
    shared,
  },
})
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 倒计时
const shareIcons = ref<any>({
  checkIcon: '../../static/images/icons/shared-2.png',
  uncheckIcon: '../../static/images/icons/shared-1.png',
})
const shareClick = () => {
  const setData = () => {
    productInfo.value.is_collect = productInfo.value.is_collect === 0 ? 1 : 0
    const type: any = productInfo.value.is_collect === 0 ? 1 : 0
    const data: any = {
      id: productInfo.value.id,
      type,
    }
    setCollectEdit(data).then((res: any) => {
      const title: any = productInfo.value.is_collect === 0 ? '取消收藏' : '已收藏'
      uni.showToast({
        title: title,
        icon: 'none',
        duration: 1000,
      })
    })
  }
  let title: any = ''
  if (productInfo.value.is_collect === 0) {
    title = '确认收藏此产品吗?'
  } else {
    title = '确认取消收藏此产品吗?'
  }
  uni.showModal({
    content: title,
    success: (res: any) => {
      if (res) {
        setData()
      }
    },
  })
}
const isSecondActivity = ref(false)
const ensureList = ref([
  {
    text: '品质保证',
  },
  {
    text: '优质服务',
  },
  {
    text: '7天无理由退货',
  },
])
const evaluateList: any = ref([])
const customerIcon = ref('../../static/images/icons/fun-2.png')
const carIcon = ref('../../static/tabbar/shop.png')
const activityIcon = ref('../../static/images/background/activity.png')
const pageBack = () => {
  // uni.switchTab({ url: '/pages/home/home' })
  uni.navigateBack()
}
const popupShow = ref(false)
const popupOpen = () => {
  popupShow.value = true
}
const proCount = ref(1)
const handleChange = (e: any) => {
  // productInf[2].value = e
}
const closePopup = () => {
  popupShow.value = false
}
const addToCart = (ev: any) => {
  ev.stopPropagation()
  ev.preventDefault()
  const params: any = {
    id: buyProduct.value.skuId,
    num: proCount.value,
    type: Number(proType.value === undefined ? 0 : proType.value),
  }
  addShopCar(params).then((res: any) => {
    uni.switchTab({ url: '/pages/home/shopping' })
  })
}
const buyProNow = () => {
  const params: any = {
    id: buyProduct.value.skuId,
    num: proCount.value,
  }
  uni.setStorageSync('buyProduct', JSON.stringify(params))
  uni.navigateTo({
    url: '/pages/shopping/confirmOrder',
  })
}
const proType: any = ref(0)
onLoad((e: any) => {
  const id: any = e.id
  const type: any = e.type
  proType.value = type
  getData(id, type)
})
onShow(() => {})
const productInfo: any = ref({})
const scalesList: any = ref([])
const buyProduct: any = ref({
  skuId: 0,
  skuValue: 0,
  skuItem: null,
})
const selectBuyProduct = (item: any) => {
  buyProduct.value.skuId = item.id
  buyProduct.value.skuValue = item.title
  buyProduct.value.skuItem = item
}
const getData = (id: any, type: any) => {
  if (type) {
    isSecondActivity.value = true
    getActivityProduct(id)
  } else {
    isSecondActivity.value = false
    getProductInfo(id)
  }
}
const getProductInfo = (id: any) => {
  getGoodDetail(id).then((res: any) => {
    if (res.data) {
      productInfo.value = res.data
      productInfo.value.images = JSON.parse(res.data.detail_pics)
      scalesList.value = [
        {
          name: '规格',
          list: res.data.skus,
        },
      ]
      if (res.data.skus.length > 0) {
        buyProduct.value.skuId = res.data.skus[0].id
        buyProduct.value.skuValue = res.data.skus[0].title
        buyProduct.value.skuItem = res.data.skus[0]
      } else {
        buyProduct.value.skuItem = res.data
      }
    }
  })
  const idParams: any = {
    id,
  }
  getGoodComments(idParams).then((res: any) => {
    if (res.data.list) {
      res.data.list.map((m: any) => {
        m.star = Number(m.star)
        if (m.pics) {
          m.images = m.pics.split(',')
        }
        return m
      })
      evaluateList.value = res.data.list
    }
  })
  addVisitRecord(idParams).then((res: any) => {
    console.log(res)
  })
}
const flashSaleTime: any = ref(0)
const getActivityProduct = (id: any) => {
  flushGoodDetail(Number(id)).then((res: any) => {
    if (res.data) {
      productInfo.value = res.data
      productInfo.value.recommend = res.data.recommends
      productInfo.value.pic = res.data.good.pic
      productInfo.value.price = res.data.good.price
      productInfo.value.origin_price = res.data.good.origin_price
      if (res.data.good) {
        if (res.data.good.detail_pics) {
          productInfo.value.images = JSON.parse(res.data.good.detail_pics)
        }
        // console.log(res.data.good.flush_end_time, flashSaleTime.value)
        if (res.data.good.flush_end_time) {
          flashSaleTime.value =
            new Date(res.data.good.flush_end_time).getTime() - new Date().getTime()
        } else {
          flashSaleTime.value = 0
        }
      }
      scalesList.value = [
        {
          name: '规格',
          list: res.data.good.skus,
        },
      ]
      if (res.data.good.skus.length > 0) {
        buyProduct.value.skuId = res.data.good.skus[0].id
        buyProduct.value.skuValue = res.data.good.skus[0].title
        buyProduct.value.skuItem = res.data.good.skus[0]
      } else {
        buyProduct.value.skuItem = res.data
      }
    }
  })
  const idParams: any = {
    id,
  }
  getGoodComments(idParams).then((res: any) => {
    if (res.data) {
      res.data.list.map((m: any) => {
        m.star = Number(m.star)
        m.images = m.pics.split(',')
        return m
      })
      evaluateList.value = res.data.list
    }
  })
  addVisitRecord(idParams).then((res: any) => {
    console.log(res)
  })
}
const lookProductPic = () => {
  uni.previewImage({
    urls: productInfo.value.images,
  })
}
const goShopCar = () => {
  uni.switchTab({
    url: '/pages/home/shopping',
  })
}
const overlayShow: any = ref(false)
const sharedInfo: any = ref(null)
const userStore: any = useUserStore()
const sharedProduct = () => {
  const userInfo = userStore.userInfo
  // const pages = getCurrentPages()
  // const currentPage = pages[pages.length - 1]
  // // 获取页面的完整路径
  // const url = currentPage.route
  // console.log(userInfo)
  if (userInfo) {
    const id: any = userInfo.user.id
    const avatar: any = userInfo.user.avatar
    const nickName: any = userInfo.user.nickname
    const dataConfig: any = {
      pic: productInfo.value.pic,
      name: nickName,
      price: productInfo.value.price,
      desc: productInfo.value.name,
      avatar: avatar,
      qrcode: '',
    }
    const paramUrl: any = `/pages/home/home?uid=${id}&cid=1&ctype=0`
    const param: any = {
      url: paramUrl,
      type: 0,
    }
    overlayShow.value = true
    createQrCode(param).then((res: any) => {
      dataConfig.qrcode = res.data
      sharedInfo.value = dataConfig
    })
  }
}
let imgUrl: any = null
const sImage = useSaveImage()
const shareSuccess = (ev: any) => {
  imgUrl = ev
}
const saveImage = () => {
  if (imgUrl) {
    sImage.save(imgUrl.path)
  }
}
const closeShared = () => {
  overlayShow.value = false
}
</script>

<style scoped lang="scss">
.home-content {
  height: 100%;
  overflow: auto;
  background: #f6f6f8;
}
.header-back {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: var(--wot-navbar-height, 88rpx);
  padding-left: 32rpx;
}
.back-icon {
  width: 48rpx;
  height: 48rpx;
  font-size: 36rpx;
  color: #333333;
  background-color: #8c98ac;
  border-radius: 50%;
}
.custom-count-down {
  display: inline-block;
  min-width: 44rpx;
  padding: 0 10rpx;
  color: #fff;
  text-align: center;
  background-color: #f03131;
  border-radius: 2px;
}

.custom-count-down-colon {
  display: inline-block;
  margin: 0 4px;
  color: #f0883a;
}

.second-right {
  margin-right: 20rpx;
}
.time-text {
  margin-bottom: 12rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #fe292b;
}
.price-box {
  box-sizing: border-box;
  width: 100%;
  padding: 32rpx 28rpx;
  background: #ffffff;
}
.price-title {
  margin-right: 8rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #f03131;
}
.price-symbol {
  margin-right: 2rpx;
  margin-bottom: 6rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #f03131;
}
.price-num {
  font-size: 40rpx;
  font-weight: 500;
  color: #f03131;
}
.price-old {
  margin-left: 16rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  text-decoration: line-through;
}
.price-icon {
  &:nth-child(1) {
    margin-right: 48rpx;
  }
  &:nth-child(2) {
    width: 48rpx;
    height: 48rpx;
  }
}
.product-title {
  margin-top: 26rpx;
  font-size: 32rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 48rpx;
  color: #333333;
  text-align: left;
}
.share-box {
  margin-top: 32rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
}
.ensure-list {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 60rpx;
  padding: 0 28rpx;
  margin-bottom: 20rpx;
  background: #faf8ff;
}

.ensure-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24rpx;
  height: 24rpx;
  margin-right: 12rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.ensure-text {
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
}
.specs-box {
  box-sizing: border-box;
  height: 112rpx;
  padding: 28rpx;
  background: #ffffff;
}
.specs-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}
.specs-desc {
  margin-left: 84rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #333333;
}
.border-image-left {
  border: 2rpx solid;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(226, 226, 226, 1)) 2 2;
}
.border-image-right {
  border: 2rpx solid;
  border-image: linear-gradient(90deg, rgba(225, 225, 225, 1), rgba(255, 255, 255, 1)) 2 2;
}
.button-size {
  width: 100%;
  height: 100%;
}
.br-left {
  border-top-left-radius: 40rpx;
  border-bottom-left-radius: 40rpx;
}
.br-right {
  border-top-right-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
}
.over-container {
  width: 80%;
  min-height: 40%;
}
::v-deep .wd-popup {
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
</style>
